<html>
<head>
<style type="text/css">
body {
	background-color:black;
}
#red {
	background-color:red;
	height:150px;
	width:150px;
	position:absolute;
	top:10px;
	left:10px;
}
#yellow {
	background-color:yellow;	
	height:150px;
	width:150px;
	position:absolute;
	top:10px;
	left:170px;
}
#blue {
	background-color:blue;	
	height:150px;
	width:150px;
	position:absolute;
	top:170px;
	left:10px;
}
#green {
	background-color:green;	
	height:150px;
	width:150px;
	position:absolute;
	top:170px;
	left:170px;
}
</style>
<script type="text/javascript" src="../js/utils.js"></script>
<script type="text/javascript" src="../js/geometry.js"></script>
<script type="text/javascript" src="../lib/json.js"></script>
<script type="text/javascript">

	function go() {
		
		var ids 	= ['red', 'yellow', 'green', 'blue']
		var classes 	= ['geom']
		var g = new CanvasGeometry ()
		g.idNames=ids
		g.classNames=classes
		alert (g.getGeometry().toJSONString())
	}

</script>
</head>
<body>

<div id='red' class='geom'></div><!-- red -->
<div id='yellow' class='geom'></div><!-- yellow -->
<div id='blue'  class='geom'></div><!-- blue -->
<div id='green' onClick="go();" class='geom'></div><!-- green -->

<br />



</body>
</html>
